<!-- 危化品车进出记录 -->
<template>
    <div class="dy-panel">
      <div class="dy-panel-main" style="width: 90vh">
        <div class="dy-panel-header">
          <div class="dy-panel-close" @click="closeCurrent"></div>
        </div>
         <div class="dy-panel-content">
          <contentTitle :title="'日客流同期对比'"></contentTitle>
          <div class="layChart" ref="ydcldbRef"></div>
        </div>
  
        <div class="layer-bottom">
          <div class="pd_abItems-contain" style="justify-content: left">
            <div class="pd_abItems-main">
              <div v-for="(item,index) in abItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
            </div>
            <div class="block_select_contain">
              <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                           @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
            </div>
  
            <div class="block_select_contain">
              <el-date-picker style="width: 15vh;"
                  v-model="selectXzyf"
                  type="day"
                  placeholder="选择日期">
              </el-date-picker>
              <!-- <el-cascader :options="fristMonthOptions" :show-all-levels="false" placeholder="选择月份"
                           @change="fristYearHandleChange"></el-cascader> -->
            </div>
            <div class="block_select_contain">
              <!-- <el-cascader :options="secondMonthOptions" :show-all-levels="false" placeholder="对比月份"
                           @change="secondYearChange"></el-cascader> -->
              <el-date-picker style="width: 15vh;"
                  v-model="selectDbyf"
                  type="day"
                  placeholder="对比日期">
              </el-date-picker>
            </div>
            <div class="pd-abItem-search" style="position: relative">
              <button class="pd-abItem-search-btn" @click="search">查询</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script setup>
  import {computed, getCurrentInstance, onMounted, ref} from "vue";
  import ContentTitle from "../contentTitle.vue";
  import {drawLine} from "../../../util/chartUtil.js";
  import {ajaxRequest} from "../../../api/code.js";
  const chart = getCurrentInstance().proxy.$echarts
  
  const emit = defineEmits(['closeChild']);
  const closeCurrent = function (){
    emit('closeChild')
  }
  
  const selectXzyf = ref()
  const selectDbyf = ref()
  
  const curServer = ref(""),curFristYear = ref(""),curSecYear = ref("");
  
  //设置服务区下拉框值
  const selectOptions = ref([{
    id: 24193,
    value: '河北高速燕赵驿行集团有限公司',
    label: '河北高速燕赵驿行集团有限公司',
    children: [{
      id: 349,
      value: '滦州服务区',
      label: '滦州服务区'
    }, {
      id: 0,
      value: '丰润停车区',
      label: '丰润停车区'
    }]
  }])
  
  const serverHandleChange = (selectItem) => {
    curServer.value = selectItem
  
  }
  
  const fristMonthOptions = ref([
     {value:'01', label:'1月'}
    ,{value:'02', label:'2月'}
    ,{value:'03', label:'3月'}
    ,{value:'04', label:'4月'}
    ,{value:'05', label:'5月'}
    ,{value:'06', label:'6月'}
    ,{value:'07', label:'7月'}
    ,{value:'08', label:'8月'}
    ,{value:'09', label:'9月'}
    ,{value:'10', label:'10月'}
    ,{value:'11', label:'11月'}
    ,{value:'12', label:'12月'}
  ])
  const secondMonthOptions = ref([
     {value:'01', label:'1月'}
    ,{value:'02', label:'2月'}
    ,{value:'03', label:'3月'}
    ,{value:'04', label:'4月'}
    ,{value:'05', label:'5月'}
    ,{value:'06', label:'6月'}
    ,{value:'07', label:'7月'}
    ,{value:'08', label:'8月'}
    ,{value:'09', label:'9月'}
    ,{value:'10', label:'10月'}
    ,{value:'11', label:'11月'}
    ,{value:'12', label:'12月'}
  ])
  
  const fristYearHandleChange = function (selectItem){
    console.log(selectItem);
    curFristYear.value = selectItem
  }
  
  const secondYearChange = function (selectItem){
    console.log(selectItem);
    curSecYear.value = selectItem
  }
  
  const areacode = ref(null)
  const abItems = ref([{title:'综合',clazz:'selected'},{title:'东(南)',clazz:''},{title:'西(北)',clazz:''}])
  const abItemsClick = function (item){
    abItems.value.forEach((res,i)=>{
      res.clazz = res.title === item.title?'selected':"";
    })
    if(item.title === '综合'){
      areacode.value = null
    }
    else if(item.title === '东(南)'){
      areacode.value = "01"
    }
    else if(item.title === '西(北)'){
      areacode.value = "02"
    }
  }
  
  const search = function (){
    // console.log(curServer);
    // console.log(curFristYear);
    // console.log(curSecYear);
    console.log(selectXzyf);
    console.log(selectDbyf);
  
    refreshData()
  }
  
  // const ydcldb_legend = ref([parseInt(curFristYear.value[0])+`月`, parseInt(curSecYear.value[0])+`月`]);
  const ydcldb_legend = ref([`选择日期`, `对比日期`]);
  const ydcldb_x = ref([])
  const ydcldb_y_1 = ref([])
  const ydcldb_y_2 = ref([])
  for (let i = 0; i < 24; i++){
    if (i < 10) {
      ydcldb_x.value.push('0'+i+':00');
    } else {
      
      ydcldb_x.value.push(i+':00');
    }
    // ydcldb_y_1.value.push("0")
    // ydcldb_y_2.value.push("0")
  }
  
  
  
  
  const ydcldbRef = ref();
  const ydcldbOpt = ref({
    color: ['#5AFFFA', '#F44538'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: '',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ydcldb_legend,
      right: '3%',
      top: '8%',
      textStyle:{
        color: '#FFFFFF'
      },
      icon:'rect',
      itemWidth: 18,
      itemHeight: 6
    },
    grid: {
      top: '35%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ydcldb_x.value,
        axisLine: { // 设置轴线样式
          lineStyle: {
            color: 'white' // 设置轴线颜色
          }
        },
        axisTick:{
          show: false
        },
        axisLabel: {
          interval:1,
          rotate: 35,
          textStyle: {
            color: 'white',
            fontSize: 10
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: "人次",
        nameTextStyle: {
          color: "#FFF",
          nameLocation: "end",
          padding:[0,0,0,-15]
        },
        axisLabel: {
          textStyle: {
            color: 'white'
          }
        },
        axisLine: { // 设置轴线样式
          lineStyle: {
            color: 'white' // 设置轴线颜色
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(127, 127, 127, 1)',
            type: 'dashed',
          }
        },
      }
    ],
    series: [
      {
        name: ydcldb_legend.value[0],
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 2
        },
        showSymbol: true,
        emphasis: {
          focus: 'series'
        },
        data: ydcldb_y_1.value
      },
      {
        name: ydcldb_legend.value[1],
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 2
        },
        showSymbol: true,
        emphasis: {
          focus: 'series'
        },
        data: ydcldb_y_2.value
      }
    ]
  });
  
  let ydcldbChart
  onMounted(() => {
    ydcldbChart = drawLine(ydcldbRef.value,ydcldbOpt.value);
    getFwqxx()
  })
  
  async function refreshData() {
    //选择时间，格式化
    const yyyy = selectXzyf.value.getFullYear();
    const mm = String(selectXzyf.value.getMonth() + 1).padStart(2, '0'); // 月份需要加1，并且补零
    const dd = String(selectXzyf.value.getDate()).padStart(2, '0'); // 日需要补零
    const queryDate = `${yyyy}-${mm}-${dd}`;
  
    //对比时间，格式化
    const yyyy2 = selectDbyf.value.getFullYear();
    const mm2 = String(selectDbyf.value.getMonth() + 1).padStart(2, '0'); // 月份需要加1，并且补零
    const dd2 = String(selectDbyf.value.getDate()).padStart(2, '0'); // 日需要补零
    const queryDateDb = `${yyyy2}-${mm2}-${dd2}`;
  
    const params = {
      xzsj : queryDate,
      dbsj : queryDateDb,
      compid: curServer.value[1],
      areacode:areacode.value
    }
  
    //后期修改的需求，数据分两次取吧
    ydcldb_y_1.value = []
    ydcldb_y_2.value = []
    ydcldb_legend.value[0] = queryDate
    ydcldb_legend.value[1] = queryDateDb
    const res = await ajaxRequest('post', 'getKltqdb', params)
    if (res.data && res.data.xz) {
      res.data.xz.forEach((item,index)=>{
        ydcldb_y_1.value[parseInt(item.sj)] = item.cnt
      })
    }
    if (res.data && res.data.db) {
      res.data.db.forEach((item,index)=>{
        ydcldb_y_2.value[parseInt(item.sj)] = item.cnt
      })
    }
  
    ydcldbOpt.value.series[0].name = ydcldb_legend.value[0]
    ydcldbOpt.value.series[1].name = ydcldb_legend.value[1]
    ydcldbOpt.value.series[0].data = ydcldb_y_1.value
    ydcldbOpt.value.series[1].data = ydcldb_y_2.value
    ydcldbChart.setOption(ydcldbOpt.value)
  }
  
  /**
   * 获取服务区档案信息
   */
  async function getFwqxx() {
    selectOptions.value[0].children = []
    const result = await ajaxRequest('post', 'getFwqxx', {})
    if (result.data && result.data.length>0) {
      result.data.forEach((item,index)=>{
        selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
      })
    }
  }
  </script>
  
  <style scoped>
  .dy-panel-main{
    padding:2.5vh;
  }
  
  .layer-bottom{
    padding-left: 0vh;
    padding-top: 2vh;
    padding-bottom: 1vh;
    border-top: 2px solid #1D4F59;
  }
  
  :deep(.el-input__wrapper){
    background-color: transparent !important;
    color: #FFFFFF !important;
    height: 3vh;
    flex-grow: 0.5 !important;
    width: 15vh;
    margin-right: 2vh;
  }
  :deep(.custom-date-picker){
    width: 22vh !important; /* 确保您的样式被应用 */
  }
  :deep(.el-date-editor .el-range-input){
    color: #FFFFFF !important;
  }
  :deep(.el-date-editor .el-range-separator){
    color: #FFFFFF !important;
  }
  
  </style>
  